<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 真实开发，以使用class的，尽可能使用class */
        /* 如果页面是某个区域是唯一的，也是可以使用id选择器 */
        /* id也好，class也好，是所有的标签的共有属性 */
        /* id选择器，只能选中某一个元素，class选择器可以选中多个元素 */
        /* id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识 */
        /* 用户名：username  user-name  user_name   userName(小驼峰)  UserName(大驼峰)  */
        /* 不要使用标签名，充当id名   <h1 id="h1">  不推荐*/
       #box1{
           color: pink;
       }
       #h1{
           color: aqua;
       }
    </style>
    <!-- 

        class选择器 和 id选择器的区别？
            1）class起名字，可以重复，ID不能重复
            2）写样式是 class起的名字  是通过 .class名字
            3）写样式是 id起的名字  是通过 #id名字
            4）实际开发中，class是使用的最多的
            6）实际开发中，后面学完JS，id选择器可以配合JS完成网页交互

     -->
</head>
<body>
    <!-- id：身份证号  唯一的    class：姓名 可以重复 -->
    <div>我是一个div</div>
    <h1 id="h1">我是一个h1标签</h1>
    <ul>
        <li>我是一个li标签</li>
        <!-- 给不同的标签起相同的id，极力不推荐 -->
        <!-- id值是唯一的，整个网页中不能重复 -->
        <li id="box2">我是一个li标签</li>
        <li>我是一个li标签</li>
    </ul>
    <p id="box1">我是一个p标签</p>
    <div>我是一个div</div>
    <ul>
        <li>
            <div>我是li中的一个DIV</div>
        </li>
    </ul>
</body>
</html>